<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		body{background:#f1f1f1;}
		.head_banner>img{
			width: 100%;
			display: block;
		}
		.center_box{
			width: 1200px;
			margin: 12px auto 0;
			padding-bottom:50px;
		}
		.head_tab{
			display: flex;
			justify-content: center;
			background: #fff;
			border-radius: 2px;
			overflow: hidden;
		}
		.head_tab_list{
			line-height: 50px;
			padding: 0 20px;
			font-size: 15px;
			color: #6b6b6b;
			letter-spacing: 1px;
			border-radius: 2px;
			transition: all .3s;
		}
		.head_tab_list:hover{
			cursor: pointer;
			color: #fff;
			background: #3966f5;
		}
		.head_tab_list_active{
			color: #fff;
			background: #3966f5;
		}
		.tab_content{
			/*height: 500px;*/
			background: #fff;
			margin-top: 30px;
			border-radius: 2px;
			padding: 20px;
			box-sizing: border-box;
		}
		.tab_content_list{
			display: none;
		}
		.tab_content_list>p{
			font-size: 15px;
			padding-left: 10px;
			position: relative;
			letter-spacing: 1px;
			line-height: 20px;
		}
		.tab_content_list>p:after{
			content: '';
			position: absolute;
			top: 3px;
			bottom: 2px;
			left: 0;
			width: 4px;
			background: #3966f5;
			border-radius: 1px;
		}
		.tab_content_list>div{
			/*height: 440px;*/
			/*overflow-x: auto;*/
			position: relative;
			padding-top: 10px;
		}
		.tab_content_list div a{
			width: 100px;
			height: 34px;
			outline: none;
			border: none;
			background: #3966F5;
			border-radius: 2px;
			color: #fff;
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -17px 0 0 -50px;
			text-align: center;
		    line-height: 34px;
		    text-decoration: none;
		}
		.tab_content_list_active{
			display: block;
		}
		.update_box{
			padding-left: 150px;
		}
		.update_box>div{
			position: relative;
			padding: 10px 0 10px 50px;
		}
		.update_box>div:after{
			content: '';
			position: absolute;
			left: 0;
			top:10px;
			bottom: -10px;
			width: 2px;
			background: #3966F5;
		}
		.update_title{
			color: #3966F5;
			font-size: 16px;
		}
		.update_title>i{
			display: block;
			width: 12px;
			height: 12px;
			background: #3966F5;
			position: absolute;
			border-radius: 50%;
			left: -5px;
		}
		.update_title>span{
			position: absolute;
			left: -80px;
		}
		.update_time{
			position: absolute;
			top: 10px;
			left: -70px;
			color: #3966F5;
			font-size: 14px;
		}
		.update_version{
			font-size: 14px;
			color: red;
		}
		.update_list>div{
			margin-top: 10px;
			font-size: 14px;
		}
		.update_list>i{
			display: block;
			width: 12px;
			height: 12px;
			border: 2px solid #3966F5;
			background: #fff;
			position: absolute;
			border-radius: 50%;
			left: -5px;
			z-index: 2;
			box-sizing: border-box;
		}
	</style>
	<body>
		<div class="content_box">
			<div class="head_banner">
				<img src="/static/img/banner_dl.jpg" />
			</div>
			<div class="center_box">
				<div class="head_tab">
					<div class="head_tab_list head_tab_list_active">下载文件</div>
					<div class="head_tab_list">操作文档</div>
					<div class="head_tab_list">系统更新日志</div>
				</div>
				<div class="tab_content">
					<div class="tab_content_list tab_content_list_active">
						<p>下载文件</p>
						<div>
							<a href="http://{$_SERVER['HTTP_HOST']}/download/wdcmenterprise.zip">下载</a>
						</div>
					</div>
					<div class="tab_content_list">
						<p>操作文档</p>
						<div>
							{:html_entity_decode($operation.operation)}
						</div>
					</div>
					<div class="tab_content_list">
						<p>系统更新日志</p>
						<div id="tmd">
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="/static/lib/jquery/1.9.1/jquery.min.js"></script>
	<script>
		$(function(){
			// var versionarrs='';
			// var updatearrs='';
			var versionlist=new Array();
			var versionarr=new Array();
			var updates=new Array();
			$(".head_tab_list").on("click",function(){
				var index = $(this).index();
				$(this).addClass("head_tab_list_active").siblings().removeClass("head_tab_list_active");
				$(".tab_content_list").eq(index).addClass("tab_content_list_active").siblings().removeClass("tab_content_list_active");
			})
			$.ajax({
				type: 'GET',
				url: 'ver_year',
				async: false,
				success: function(data){
					if(data.code==200){
						// var versionlist='';
						for (var i = data.toyear; i >= 2018; i--) {
							ii=data.toyear-i;
							versionlist[ii]='';
							versionlist[ii]+='<div class="update_box">'+
											'<div class="update_title" id="subtmd'+i+'">'+
												'<i></i>'+
												'<span class="update_year">'+i+'</span>'+
												'<p>更新日志</p>'+
											'</div>'+
										 '</div>';
							$("#tmd").append(versionlist[ii]);
							$.ajax({
								type:'GET',
								url:'versions',
								async: false,
								data:{yearid:i},
								success:function(res){
									for (var j = 0; j < res.version.length; j++) {
										versionarr[ii]=new Array();
										updates[ii]=new Array();
										versionarr[ii][j]='';
										updates[ii][j]='';
										versionarr[ii][j]+='<div class="update_list" id="subtms'+i+j+'">'+
														'<i></i>'+
														'<p>'+
															'<span class="update_time">'+res.version[j].date+'</span>'+
															'<span class="update_version">'+res.version[j].version+'</span>'+
														'</p>'+
													 '</div>';
										$("#subtmd"+i).after(versionarr[ii][j]);
										$.ajax({
											type:'GET',
											url:'updates',
											async: false,
											data:{v_id:res.version[j].id},
											success:function(ress){
												for (var k = 0; k < ress.updates.length; k++) {
													updates[ii][j]=new Array();
													updates[ii][j][k]='';
													updates[ii][j][k]+='<div>'+ress.updates[k].content+'</div>';
													$("#subtms"+i+j+" p").after(updates[ii][j][k]);
												}
											},
											error:function(ress){
												console.log(ress.msg);
											}
										})


									}
								},
								error:function(res){
									console.log(res.msg);
								}
							});
						}
					}else{
						$("#tmd").append('<div class="update_box"><div class="update_title"><i></i><span class="update_year">2019</span><p>暂无数据</p></div></div>');
					}
				},
				error:function(data) {
					console.log(data.msg);
				},
			});

		})
	</script>
</html>
